<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<style type="text/css">
	.container{
		display: grid;
		grid-template-columns: repeat(12,1fr);
	    grid-template-rows: 100vh;
	}
	.item{
		outline: 2px solid #aaa;
		background-color: #000000;
	}
	
	@media (max-width:768px) {
		.container{
			grid-template-columns: repeat(6,1fr);
		}
	}
</style>
</head>
<body>
	<div class="container">
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
		<div class="item">
			
		</div>
	</div>
</body>
<script type="text/javascript">
	
</script>
</html>